<template>
	<view class="my-doctor">
		<u-tabs v-if="tabLists.length>1" :list="tabLists" :is-scroll="false" :current="currentTab" @change="change" :active-color='themeColorLight'></u-tabs>
		<view class="doctor-list-main">
			<view v-for="(item,index) in doctorList" :key="index" class="doctor-list-main-item">
				<view class="doctor-list-main-item-box flexR">
					<view class="img">
						<image :src="baseApi+item.imagePath" mode="scaleToFill"></image>
					</view>
					<view class="doctor-list-main-item-right">
						<view class="doctor-list-main-item-right-title flexR">
							<view class="title-left flexR">
								<text>{{item.name}}</text>
								<text class="tag">{{item.jobTitle}}</text>
								<!-- 如果挂号医生没有收藏可以收藏 -->
								<template v-if="item.collectionType===2">
									<u-icon v-if="item.collectionStatus===0" name="star" :color="orageColor" size='50' @click="collect(item,false)"></u-icon>
								</template>
								<u-icon v-else name="star-fill" :color="orageColor" size='50' @click="collect(item,true)"></u-icon>
							</view>
							<u-icon name="arrow-right" @click="toPage(item)"></u-icon>
						</view>
						<view class="row">
							<label>科室：</label><text>{{item.deptName}}</text>
						</view>
						<view class="row sc">
							<label>擅长：</label>{{item.expertise}}
						</view>
					</view>
				</view>
			</view>
			<u-empty text='暂无信息' mode="list" v-if="!load&&doctorList.length===0"></u-empty>
		</view>
		<Loading :load='load' />
	</view>
</template>

<script>
	import { themeColorLight, orageColor } from '@/static/js/theme.js'
	import { checkPatId } from '@/common/js/common.js'
	import { getHisRegister } from '@/api/register.js'
	import {collectDoctor} from '@/api/otherService.js'
	import Loading  from '@/components/Load/index.vue'
	import { mapGetters } from 'vuex'
	export default {
		components:{ Loading },
		data() {
			return {
				themeColorLight,orageColor,
				tabLists:[{name:'历史挂号医生'},{name:'已收藏关注医生'}],
				currentTab:0,
				load:false,
				doctorList:[]
			}
		},
		async onLoad() {
			await this.$onLaunched
			this.getDoctorList()
		},
		computed:{
			...mapGetters(['userInfo','baseApi'])
		},
		methods: {
			change(val){
				this.currentTab = val
				this.getDoctorList()
			},
			getDoctorList(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				this.doctorList = []
				let params = {
					collectionType:this.currentTab===0?2:1,
					patientId:this.userInfo.patId
				}
				getHisRegister(params).then(data => {
					this.load = false
					this.doctorList = data||[]
				}).catch(e => {
					this.load = false
				})
			},
			// status true 表示已收藏  false  未收藏
			cancleCollect(item,status){
				if(status){}
			},
			toPage(item){
				uni.navigateTo({
					url:'/pages/registerPblist/index?doctorCode='+item.code
				})
			},
			collect(item,flag){
				this.load = true
				let params = {
					code:item.code,
					collectionType:1,
					name:item.name,
					patientId:this.userInfo.patId,
					collectionStatus:flag?0:1
				}
				collectDoctor(params).then(data => {
					this.load = false
					this.$u.toast('操作成功')
					this.getDoctorList()
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doctor-list-main{
		height: calc(100vh - 80rpx);
		overflow: scroll;
		background-color: $uni-bg-color;
		.doctor-list-main-item{
			.doctor-list-main-item-box{
				background-color: $uni-bg-color;
				padding: 40rpx 30rpx;
				>.img{
					width: 176rpx;
					height: 176rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30rpx;
					>image{
						width: 176rpx;
						height: 198rpx;
					}
				}
				>.doctor-list-main-item-right{
					flex: 1;
					.doctor-list-main-item-right-title{
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #000000;
						justify-content: space-between;
						font-weight: bold;
						margin-bottom: 10rpx;
						>.title-left{
							align-items: flex-end;
							.tag{
								font-size: 22rpx;
								color: $text-color;
								font-weight: normal;
								background-color: $tag-color;
								height: 36rpx;
								line-height: 36rpx;
								border-radius: 5rpx;
								padding: 0 10rpx;
								margin: 0 10rpx;
							}
						}
					}
					>.row{
						label{
							font-weight: 700;
							font-size: 12px;
						}
						>text{
							color: $theme-color-light;
						}
					}
					.sc{
						height: 40px;
						line-height: 20px;
						font-size: 12px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; // 作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp: 2; // 显示的行
					}
				}
			}
		}
	}
</style>